<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>话题</title>
    <link rel="stylesheet" th:href="@{/semantic/semantic.min.css}">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/editor/css/editormd.min.css}"/>
</head>

<body style="background-color: #FAFAFA">

<div id="contexr" style="width: auto">

    <div id="app" class="layui-row">

        <div class="layui-col-md10 layui-col-md-offset1">
            <!--        导航栏-->
            <div th:insert="component/header.html::header(active)"></div>

            <div class="layui-row layui-col-space10" style="margin-top: 5px">

                <!--                文章的内容-->
                <div id="topic" th:value="${#request.getAttribute('topic').id}" class="" style="margin-top: 50px;">
                    <h1 th:text="${#request.getAttribute('topic').title}" class="ui header"></h1>

                    <div style="margin-top: 30px; font-size: 16px">
                        <a th:href="@{/user/info/{id}(id=${#request.getAttribute('user').id})}">
                            <img class="ui middle aligned mini circular image"
                                 th:src="${#request.getAttribute('user').img}">
                            <span th:text="${#request.getAttribute('user').username}"></span>
                        </a>
                    </div>

                    <div id="text"
                         th:text="${#request.getAttribute('topic').content}"
                         style="display: none"></div>

                    <div id="editor"
                         style="margin-top: 70px;white-space:normal;word-break:break-all"></div>
                </div>

                <h3 class="ui dividing header" style="margin-top: 100px">Comments</h3>

                <!--                评论-->
                <div th:if="${#request.getAttribute('uacs').size() != 0}" class="ui comments">
                    <div class="comment" th:each="uac, iterStat:${#request.getAttribute('uacs')}"
                         style="margin-bottom: 30px">
                        <a class="avatar">
                            <img th:src="${uac.img}">
                        </a>
                        <div class="content">
                            <a class="author" th:href="@{/user/info/{id}(id=${uac.userId})}"
                               th:text="${uac.username}"></a>
                            <div class="metadata">
                                <span class="date" th:text="${uac.time}"></span>
                            </div>
                            <div class="text" th:text="${uac.content}"></div>
                            <div class="actions">
                                <a th:if="${session.user != null && #request.getAttribute('user') != null && #request.getAttribute('user').id == session.user.id}"
                                   v-on:click="deleteComment($event)"
                                   th:value="${uac.commentId}" class="delete">
                                    <i class="ui delete icon"></i>Delete
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--                评论提示-->
                <div th:if="${#request.getAttribute('uacs').size() == 0}">
                    <div class="ui icon message">
                        <i class="green check icon"></i>
                        <div class="content">
                            <div class="header">提示</div>
                            <p>现在没有评论哦</p>
                        </div>
                    </div>
                </div>

                <h3 class="ui dividing header" style="margin-top: 100px">Reply</h3>

                <!--                登录提示-->
                <div th:if="${session.user == null}" class="ui icon message">
                    <i class="red times icon"></i>
                    <div class="content">
                        <div class="header">提示</div>
                        <p>登录后才可以进行评论</p>
                    </div>
                </div>

                <!--                回复-->
                <div th:if="${session.user != null}" class="layui-form" style="margin-top: 30px">
                    <div class="layui-form-item layui-form-text">
                        <label class="layui-form-label">评论：</label>
                        <div class="layui-input-block">
                            <textarea v-model="content" name="desc" placeholder="请输入评论内容"
                                      class="layui-textarea"></textarea>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button v-on:click="commit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交
                            </button>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

<div th:insert="index.html::pageTail"></div>

</body>

<script th:src="@{/js/jquery.min.js}" crossorigin="anonymous"></script>
<script th:src="@{/editor/editormd.min.js}"></script>
<script th:src="@{/editor/lib/marked.min.js}"></script>
<script th:src="@{/editor/lib/prettify.min.js}"></script>
<script th:src="@{/semantic/semantic.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/my.js}"></script>
<script type="text/javascript">
    $(function () {
        var testView = editormd.markdownToHTML("editor", {
            markdown: $('#text')[0].innerHTML
            // markdown : "[TOC]\n### Hello world!\n## Heading 2", // Also, you can dynamic set Markdown text
            // htmlDecode : true,  // Enable / disable HTML tag encode.
            // htmlDecode : "style,script,iframe",  // Note: If enabled, you should filter some dangerous HTML tags for website security.
        });
    });

    new Vue({
        el: '#app',
        data: {
            content: '',
            topicId: $('#topic').attr('value')
        },
        methods: {
            commit: function () {
                var requestData = {
                    content: this.content,
                    topicId: this.topicId
                }
                console.log(requestData)
                axios.post('/comment/add', requestData).then(response => {
                    if (response.data == 'success')
                        layer.open({
                            title: '提示',
                            content: '评论提交成功',
                            yes: function (index, layero) {
                                window.location.reload()
                            }
                        });
                })
            },

            deleteComment: function (event) {
                var id = event.currentTarget.getAttribute('value');
                layer.open({
                    title: '提示',
                    content: '要删除此评论吗？',
                    yes: function(index, layero){
                        axios.post('/comment/delete', {id: id}).then(res => {
                            location.reload()
                        })
                        layer.close(index); //如果设定了yes回调，需进行手工关闭
                    }
                });
            }
        }
    })
</script>

</html>